{% extends "base.html" %}

{% block subtitle %}
  Main Page
{% endblock subtitle %}

{% block content %}
  <div class="oppia-content">
    <oppia oppia-id="0"></oppia>

    <hr>
    <div class="row-fluid" id="buttons" style="display: none;">
      <div class="span6">
        <center class="oppia-btn-container">
          <a class="btn oppia-btn" href="/gallery">Browse more explorations</a>
        </center>
      </div>
      <div class="span6">
        <center class="oppia-btn-container">
          <a class="btn oppia-btn" href="/learn_random">Play a new exploration</a>
        </center>
      </div>
    </div>

  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script src="/scripts/oppia-player-0.0.0.js"></script>
  <script>
    window.OPPIA_PLAYER.onHeightChangePostHook = function(newHeight, iframeNode) {    
      console.log(
          'Custom onHeightChangePostHook event triggered on ' + iframeNode + '.');
      setTimeout(function () {
        $('#buttons').show();
      }, 1000);
    };
  </script>
{% endblock footer_js %}
